@import "functions";
@import "colors";

.CodeMirror {
  font: 11px/15px Monaco, Courier, MonoSpace;
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  position: relative;
  padding-top: 50px;
  width: 100%;
  height: 225px;
  @include border-radiuses(9px, 4px, 4px, 9px); // One pixel higher than bar to prevent white leakage
  @include box-shadow((0 1px 0 #3f3f3f));
}

.CodeMirror-scroll {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }
  &::-webkit-scrollbar-track {
    position: relative;
    right: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
  }
}

.CodeMirror-gutter {
  position: absolute; 
  left: 0; 
  top: 0;
  // width: 20px; // Without this is should expand naturally (like for when 1000's of lines of code)
  height: 100%;
  padding: 10px 4px 0 10px;
}
.CodeMirror-gutter-text {
  color: black;
  text-align: right;
  white-space: pre !important;
}
.CodeMirror-lines {
  padding: 10px 10px 10px 10px;
  overflow: hidden;
}

.CodeMirror pre {
  @include border-radius(0);
  color: black;
  border-width: 0; 
  margin: 0; 
  padding: 0; 
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0; margin: 0;
  white-space: pre;
  word-wrap: normal;
}

.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
}
.CodeMirror-wrap .CodeMirror-scroll {
  overflow-x: hidden;
}

.CodeMirror textarea {
  outline: none !important;
}

.CodeMirror pre.CodeMirror-cursor {
  z-index: 10;
  position: absolute;
  visibility: hidden;
  border-left: 1px solid black;
}
.CodeMirror-focused pre.CodeMirror-cursor {
  visibility: visible;
}

// TODO: move to theme?
div.CodeMirror-selected { 
  background: rgba(0,0,0,0.5); }
.CodeMirror-focused div.CodeMirror-selected { 
  background: #444;
}

.CodeMirror-searching {
  background: #ffa;
  background: rgba(255, 255, 0, .4);
}

span.cm-header, span.cm-strong {font-weight: bold;}
span.cm-em {font-style: italic;}
span.cm-emstrong {font-style: italic; font-weight: bold;}
span.cm-link {text-decoration: underline;}

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}